<template>
  <div class="container">
    <Header :showRefresh="false" />
    <div class="page-main">
      <!-- <div class="page-main-query all-search">
        <el-input
          class="input"
          placeholder="请输入关键词搜索"
          v-model="name"
          @input="handleSearch"
        >
          <template #append>
            <el-button @click="handleSearch" :icon="Search" />
          </template>
        </el-input>
      </div> -->
      <div class="table-area">
        <OrgTree
          :selectArea="true"
          background="#fff"
          ref="OrgTree"
          :showAll="false"
          :disabled="loading"
          @select="handleSelectOrg"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from "vue";
import Header from "@/components/Header.vue";
import { Search } from "@element-plus/icons-vue";
import OrgTree from "../user/components/OrgTree.vue";
export default {
  name: "Org",
  components: {
    OrgTree,
    Header,
  },
  setup() {
    const loading = ref(false);
    //查询条件
    const query = reactive({
      name: null,
    });
    // 执行搜索
    const handleSearch = () => {

    };
    const handleSelectOrg = () => {
      
    };
  
    return {
      Search,
      loading,
      ...toRefs(query),
      query,
      handleSearch,
      handleSelectOrg,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../globle.scss";
.page-main-query {
  margin-bottom: 20px;
}

:deep(.el-tree-node__content) {
  height: 50px;
}
.table-area {
  height: calc(100vh - 200px);
  overflow:auto;
  // background: #f6f9ff;
}
</style>